<template>
  <div>
    <div class="icom">
      <div></div>
      <div v-if="!userstor.menuFold" class="title"></div>
    </div>
    <!-- <el-menu  :collapse="userstor.menuFold" :collapse-transition="false">
      <el-sub-menu index="1">
        <template #title>
          <el-icon>
            <location />
          </el-icon>
          <span>管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="home" @click="menuClick">首页</el-menu-item>
          <el-menu-item index="user" @click="menuClick">用户</el-menu-item>
          <el-menu-item index="role" @click="menuClick">角色</el-menu-item>
          <el-menu-item index="menu" @click="menuClick">菜单</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu> -->
    <menus :menu="menusdata"></menus>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import menus from './menus.vue';
import { menuqueryAll, roleMenuAll } from "@/service/index.js"
import { transTree } from "@/ults/ults"
import { localCache } from "@/ults/cache.js"
import { ref } from 'vue';
import { useStore } from "@/store/main"
const userstor = useStore()
const route = new useRouter()
const menuClick = (e) => {
  route.push(e.index)
}
 // 获取树形菜单
 let menusdata = ref([])
 function getmenu(){
  menuqueryAll().then(res=>{
    menusdata.value = transTree(res.data, "")
  })
}
getmenu()
console.log(menusdata.value)


</script>

<style scoped>
.icom {
  height: 60px;
}
.title {
  /* height: 60px; */
  width: 100%;
  line-height: 60px;
  text-align: center;
  font-weight: 800;
  font-size: 38rpx;
}
</style>
